<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>咸阳市红色资源体验平台</title>
    <link rel="stylesheet" href="../layui/css/layui.6css">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../js/myjs/common/navbar.js"></script>
    <style>
        .layui-show {
            color: white;
            width: 500px;
            height: 300px;
            border: solid 1px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: rgb(230, 230, 230, 0.3);
        }
        body {
            background-image: url(../icon/background.jpeg);
            background-size: cover;
        }
        .login-title {
            font-size: 25px;
            width: 500px;
            text-align: center;
            margin-top: 40px;
            margin-bottom: 20px;
            color: cornflowerblue;
        }
        .layui-input {

            width: 300px;
            margin-left: 100px;
            height: 38px;
            border: white;
            opacity: 0.7;
            margin-bottom: 3px;
        }
        .layui-input-safe {
            opacity: 0.7;
            width: 215px;
            margin-left: 100px;
            height: 40px;
            border: white;
            margin-bottom: 3px;
        }
        #captchaImage {
            position: absolute;
            left: 320px;
            top: 180px;
        }
        #login-success {
            width: 304px;
            color: white;
            border: cornflowerblue;
            background-color: cornflowerblue;
            margin-left: 100px;
            opacity: 0.7;
        }
        .not-register {
            position: absolute;
            bottom: 10px;
            left: 20px;
        }
        .findFassword {
            position: absolute;
            bottom: 10px;
            right: 20px;
        }
    </style>
</head>
<body class="layui-layout-body" style="background-color: #F2F2F2; height: 100%; width:100%;">
<div class="layui-container">
    <div class="layui-row" style="padding: 20px">
        <div class="layui-card">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="padding: 20px">
                <div class="layui-form layui-tab-content" style="padding: 20px 0">
                    <div class="layui-tab-item layui-show">
                        <div class="login-title" >用户登录</div>
                        <div class="layui-form layui-form-pane">
                            <form method="post">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="username" required lay-verify="required|username"
                                               lay-reqtext="用户名是必填项，不能为空" placeholder="用户名" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline">
                                        <input type="password" name="password" required lay-verify="required|password"
                                               lay-reqtext="密码是必填项，不能为空" placeholder="用户密码" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="identifyCode" id="identifyCode" lay-verify="required"
                                               lay-reqtext="验证码是必填项，不能为空" placeholder="验证码" autocomplete="off"
                                               class="layui-input-safe">
                                    </div>
                                    <div class="layui-form-mid" style="padding: 0!important;">
                                        <img id="captchaImage" src="/mausoleum/user/changeCode" style="height: 40px;width: 85px;"/>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button  id="login-success" class="layui-btn" lay-submit lay-filter="login_submit">登录</button>
                                    <div class="not-register"><a href="/mausoleum/html/register.html">去注册</a></div>
                                    <div class="findFassword"> <a style="cursor: pointer" onclick="modifyPassword()">忘记密码？</a> </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type ="hidden" name="user" id="user">
</div>
<script>
    $("#captchaImage").attr("src", "/mausoleum/user/changeCode?timestamp=" + (new Date()).valueOf());
    $('#captchaImage').click(function () {
        $("#captchaImage").attr("src", "/mausoleum/user/changeCode?timestamp=" + (new Date()).valueOf());
    });
    layui.use('form', function () {
        var form = layui.form, layer = layui.layer;
        //表单验证
        form.verify({
            username: [
                /^[a-zA-Z0-9_]{4,12}$/,
                '用户名必须由【4到12位】的【字母或数字】组成，不能出现空格'
            ],
            password: [
                /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,20}$/,
                '密码必须由【6到20位】的【字母和数字】组成，不能出现空格'
            ]
        });

        //监听提交
        form.on('submit(login_submit)', function (data) {
            console.log("55555555555555")
            var url = '/mausoleum/user/login';
            $.post(url, {
                username: data.field.username,
                password: data.field.password,
                identifyCode: data.field.identifyCode
            }, function (result) {
                console.log(result)
                if (result.code == 0) {
                    console.log(result)
                    layer.load(3);
                    window.location.href = '/mausoleum/html/mmap.html';
                } else {
                    layer.msg(result.msg, {icon: 5, anim: 6});
                }
                //attr设置属性，在这里设置图片的src属性
                $("#captchaImage").attr("src", "/mausoleum/user/changeCode?timestamp=" + (new Date()).valueOf());
            });
            return false;
        });
    });
</script>
</body>
</html>